<template>
  <div>
    <h2 style="text-align: center">库存一览</h2>
    <el-table :data="cutObj.records" border stripe style="width: 100%">
      <el-table-column prop="name" label="商品名"  />
      <el-table-column prop="type" label="类别"  />
      <el-table-column prop="saveNumber" label="库存数量"  />
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button  type="primary" size="small" @click="findProduct(scope.row)">查看</el-button>
          <el-button  type="success" size="small" @click="findById(scope.row)">修改销售价</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="cutObj.current"
        v-model:page-size="cutObj.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutObj.total"
        @current-change="findByItem"
    />

    <el-row>
      <el-col :span="12"></el-col>
      <el-col :span="10" style="margin-top:10px;padding-top:10px;padding-right:50px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 300px;height: 150px;">
        <el-form
            label-width="120px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="商品名">
            <el-input v-model="queryObj.name" />
          </el-form-item>

          <el-form-item label="类别">
            <el-select v-model="queryObj.type" class="m-2" placeholder="请选择类别" size="large">
              <el-option  label="电脑产品" value="电脑产品"/>
              <el-option  label="安防产品" value="安防产品"/>
              <el-option  label="打印扫描设备" value="打印扫描设备"/>
              <el-option  label="办公耗材" value="办公耗材"/>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="findByItem(1)">
              <el-icon style="font-size: 20px;padding-right: 10px;"><Search /></el-icon>查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2"></el-col>
    </el-row>


    <!--查看对话框-->
    <el-dialog
        v-model="showFindById"
        title="查看库存商品信息"
        width="50%"
    >
        <el-row>
          <el-col :span="2"></el-col>
          <el-col :span="18">
            <el-row>
              <el-col :span="14">
                商品编号：{{findObj.id}}<br><br>
                商品名：{{findObj.name}}<br><br>
                类别：{{findObj.type}}<br><br>
                库存数量：{{findObj.saveNumber}}<br><br>
                最新采购价：{{findObj.buyPrice}}<br><br>
                建议销售价：{{findObj.sellPrice}}<br><br>
              </el-col>
              <el-col :span="10">
                <img :src="'/project/productImg/'+findObj.picture" width="200" height="200">
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="2"></el-col>
        </el-row>

      <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="showFindById = false">确定</el-button>
      </span>
      </template>
    </el-dialog>


    <!--修改销售价对话框-->
    <el-dialog
        v-model="showUpdate"
        title="修改销售价"
        width="50%"
    >
      <el-row>
        <el-col :span="2"></el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="14">
              商品编号：{{updateObj.id}}<br><br>
              商品名：{{updateObj.name}}<br><br>
              类别：{{updateObj.type}}<br><br>
              库存数量：{{updateObj.saveNumber}}<br><br>
              最新采购价：{{updateObj.buyPrice}}<br><br>
              建议销售价：<el-input   v-model="updateObj.sellPrice"/><br><br>
            </el-col>
            <el-col :span="10">
              <img :src="'/project/productImg/'+updateObj.picture" width="200" height="200">
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2"></el-col>
      </el-row>

      <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="updateSellPrice()">修改</el-button>
      </span>
      </template>
    </el-dialog>


  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutObj:{}, //分页查询商品对象
      queryObj:{}, //查询条件对象
      findObj:{}, //按ID查询商品对象
      updateObj:{}, //修改商品对象
      showFindById:false, //是否显示查看商品对话框
      showUpdate:false, //是否显示修改商品对话框
    }
  },
  methods:{
    findByItem(pageNO){ //动态条件分页查询商品
      //封装页码
      this.queryObj.pageNO = pageNO;
      axios.get("/project/product/findByItem",{
        params:this.queryObj
      }).then(resp =>{
        this.cutObj = resp.data;
      })
    },
    findProduct(pobj){ //按ID查询商品，弹出查看对话框
      axios.get("/project/product/findById",{
        params:{
          id:pobj.id
        }
      }).then(resp =>{
        this.findObj = resp.data;
        this.showFindById = true;
      })
    },
    findById(pobj){//按ID查询商品，弹出修改对话框
      axios.get("/project/product/findById",{
        params:{
          id:pobj.id
        }
      }).then(resp =>{
        this.updateObj = resp.data;
        this.showUpdate = true;
      })
    },
    updateSellPrice(){//修改商品销售价
      axios.get("/project/product/updateSellPrice",{
        params:this.updateObj
      }).then(resp =>{
        if(resp.data =="ok"){
          this.findByItem(1);
          this.showUpdate = false;
        }
      })
    }
  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>